<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>购物车</title>
		<link href="../../../public/static/commen/css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../../public/static/commen/css/base.css" />
		<link rel="stylesheet" type="text/css" href="../../../public/static/v1/css/shoppingCard/shopping_details.css" />
	</head>

	<body>
		<div class="mui-content">
			<div class="mui-scroll" id="go1">
				<!--轮播图-->
				<div id="slider" class="mui-slider">
					<div class="search_index clearfix">
						<img src="../../../public/static/v1/img/shoppingCard/icon_ProductDetails_back@2x.png" class="mui-action-back" />
						<img src="../../../public/static/v1/img/shoppingCard/icon_ProductDetails_share@2x.png" class="shopping_share" />
						<img src="../../../public/static/v1/img/shoppingCard/icon_ProductDetails_shopCar@2x.png" class="shopping_go" />
					</div>
					<div class="mui-slider-group mui-slider-loop" id="bannerimg">
						<!--支持循环，需要重复图片节点-->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#"><img src="../../../public/static/v1/img/shoppingCard/shopping_04.png" /></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="../../../public/static/v1/img/shoppingCard/shopping_01.png" /></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="../../../public/static/v1/img/shoppingCard/shopping_02.png" /></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="../../../public/static/v1/img/shoppingCard/shopping_03.png" /></a>
						</div>
						<div class="mui-slider-item">
							<a href="#"><img src="../../../public/static/v1/img/shoppingCard/shopping_04.png" /></a>
						</div>
						<!--支持循环，需要重复图片节点-->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#"><img src="../../../public/static/v1/img/shoppingCard/shopping_01.png" /></a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>

				</div>
				<!--轮播图-->
				<!--轮播图下的商品详情-->
				<ul class="shopping_details">
					<li>
						<img src="../../../public/static/v1/img/shoppingCard/icon_ProductDetails_mark@2x.png" class="tuijian" />
						<span>无线蓝牙键盘Varmilo阿米洛VB87背光机械键盘定制樱桃青轴茶轴红轴</span>
					</li>
					<li class="li2">
						<span class="li2_span1">￥</span><span class="li2_span2">1288.00</span><span class="li2_span3">￥1488.00</span>
					</li>
					<li class="clearfix li3">
						<p class="p1 l"><img src="../../../public/static/v1/img/shoppingCard/icon_ProductDetails_promotion@2x.png" /></p>
						<p class="p2 l">使用余额购买，将获得7743点积分和249代金券使用代金券购买，将获得249代金券</p>
					</li>
					<li class="li4">
						<p class="li4_p1"><span>邮费：</span><span>7.00元</span></p>
						<p class="li4_p2"><span>销量：</span><span>216笔</span></p>
						<p class="li4_p3"><span>人气：</span><span>572</span></p>
					</li>
				</ul>
				<!--轮播图下的商品详情-->
				<!--累计评论-->
				<ul class="mui-table-view add_pinglun">
					<li class="mui-table-view-cell show">
						<a class="mui-navigate-right" href="#">
							<span>累计评论（294）</span>
							<p class="mui-badge"><span>当前评分：</span><span>4.3</span></p>
						</a>
					</li>
				</ul>
				<!--累计评论-->
				<!--基本信息，商品详情，评论-->
				<div class="basic_details_discuss" id="go2">
					<img src="../../../public/static/v1/img/shoppingCard/bg_Product_web@2x.png" />
				</div>
				<ul class="comment_all" id="go3">
					<li>
						<p class="clearfix"><span class="l">173****6556</span><span class="r">2017-08-16</span></p>
						<p class="shop_specification"><span>商品规格：</span><span>红轴 RGB 彩灯</span></p>
						<p class="comment_area">评论是标准的15字，不信你数一数</p>
						<p class="comment_pic">
							<img src="../../../public/static/v1/img/shoppingCard/small1-5@2x.png" />
							<img src="../../../public/static/v1/img/shoppingCard/small2-6@2x.png" />
							<img src="../../../public/static/v1/img/shoppingCard/small3-7@2x.png" />
						</p>
					</li>
					<li>
						<p class="clearfix"><span class="l">173****6556</span><span class="r">2017-08-16</span></p>
						<p class="shop_specification"><span>商品规格：</span><span>红轴 RGB 彩灯</span></p>
						<p class="comment_area">一起买了两个，一个白色7我用，一个黑色7p给老公，我的很好，老公的边缘怎么都不服帖，钢化膜貌似比竖中指变高，老公所懒得换了，东子还是不错的，只是转载好的东西也难免会出现挟持，理解，以后有徐iyaohaihui来买。</p>
					</li>
				</ul>
				<!--基本信息，商品详情，评论-->
			</div>
		</div>

		<!--滑动到一定距离时，顶部导航栏显示-->
		<div class="top_fixed">
			<header class="mui-bar mui-bar-nav top_fixed_header2">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title shopping_title">无线蓝牙键盘Varmilo阿米诺VB87背光的的的的的</h1>
				<img src="../../../public/static/v1/img/shoppingCard/icon_ProductDetails_shopCarOffset@2x.png" class="shopping_go shopping_go1" />
			</header>
			<ul class="clearfix" id="nav1">
				<li data-to="go1">基本信息</li>
				<li data-to="go2">商品详情</li>
				<li data-to="go3">评论（294）</li>
			</ul>
		</div>
		<!--滑动到一定距离时，顶部导航栏显示-->
		<footer class="clearfix shopping_footer">
			<div class="l clearfix footer_div1">
				<p class="l"><img src="../../../public/static/v1/img/shoppingCard/icon_ProductDetails_collect@2x.png" /></p>
				<p class="l"><img src="../../../public/static/v1/img/shoppingCard/icon_ProductDetails_store@2x.png" /></p>
			</div>
			<div class="l footer_div2">
				<a href="#add-gouwu"><button type="button" class="add_shop_car">加入购物车</button></a><a href="#add-goumai"><button type="button" class="liji_shop">立即购买</button></a>
			</div>
		</footer>

		<!--点击加入购物车底部滑出弹窗-->
		<div id="add-gouwu" class="box mui-popover mui-popover-action mui-popover-bottom">
            <div class="shop-info clearfix shop-info1">
				<div class="l shop_head_small">
                    <img src="../../../public/static/v1/img/shoppingCard/shop_head12@2x.png"/>
				</div>
				<div class="l rky">
					<p class="rky_p1"><span>￥</span><span>1288.00</span></p>
					<p class="rky_p2"><span>库存：</span><span>316</span></p>
					<div class="clearfix rky_p3">
						<p class="l"><span>已选规格1：</span><span>红轴</span></p>
						<p class="l"><span>已选规格2：</span><span>彩灯</span></p>
					</div>
				</div>
			</div>
			<div class="shop-info shop-info2">
				<p>规格参数</p>
				<p class="si_p2"><span class="select_span">规格A</span><span>规格B</span><span>规格C</span></p>
			</div>
			<div class="shop-info shop-info2">
				<p>规格参数</p>
				<p class="si_p2"><span class="select_span">规格D</span><span>规格E</span><span>规格F</span></p>
			</div>
			<div class="shop-info shop-info2">
				<p>购买数量</p>
				<div class="clearfix shop-arithmetic">
					<a class="l minus">-</a>
					<span class="l num">1</span>
					<a class="l plus">+</a>
				</div>
			</div>
			<button type="button" id="add_shop_car">加入购物车</button>

		</div>

		<!--点击加入购物车底部划出弹窗-->

		<!--点击立即购买底部滑出弹窗-->
		<div id="add-goumai" class="box mui-popover mui-popover-action mui-popover-bottom">
			<div class="shop-info clearfix shop-info1">
				<div class="l shop_head_small">
                    <img src="../../../public/static/v1/img/shoppingCard/shop_head12@2x.png"/>
				</div>
				<div class="l rky">
					<p class="rky_p1"><span>￥</span><span>1288.00</span></p>
					<p class="rky_p2"><span>库存：</span><span>316</span></p>
					<div class="clearfix rky_p3">
						<p class="l"><span>已选规格1：</span><span>红轴</span></p>
						<p class="l"><span>已选规格2：</span><span>彩灯</span></p>
					</div>
				</div>
			</div>
			<div class="shop-info shop-info2">
				<p>规格参数</p>
				<p class="si_p2"><span>规格A</span><span>规格A</span><span>规格A</span></p>
			</div>
			<div class="shop-info shop-info2">
				<p>规格参数</p>
				<p class="si_p2"><span>规格A</span><span>规格A</span><span>规格A</span></p>
			</div>
			<div class="shop-info shop-info2">
				<p>购买数量</p>
				<div class="clearfix shop-arithmetic">
					<a class="l minus">-</a>
					<span class="l num">1</span>
					<a class="l plus">+</a>
				</div>
			</div>

			<button type="button" id="liji_shop">立即购买</button>

		</div>

		<!--点击立即购买底部划出弹窗-->
	</body>

</html>
<script src="../../../public/static/commen/js/vue.min.js"></script>
<script src="../../../public/static/commen/js/mui.min.js"></script>
<script src="../../../public/static/commen/js/jquery.min.js"></script>
<script src="../../../public/static/v1/js/shoppingCard/shopping_details.js"></script>